<script>
import {mapState, mapGetters} from "vuex";

export default {
  name: "about",
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["doubleCount","totalAge","getUserById","getDoubleTotalAge"]),

      /*
      count(){
        return this.$store.state.count
      },

      doubleCount(){
        return this.$store.getters.count
      },

      totalAge() {
        return this.$store.getters.totalAge
      },
      getUserById() {
        return this.$store.getters.getUserById
      },
       getDoubleTotalAge() {
        return this.$store.getters. getDoubleTotalAge
      }
    */

  },
  methods: {
    add() {
      this.$store.dispatch("changeCountAction", this.count)
    }
  }
}
</script>

<template>
  <div class="layui-panel about">
    <h1>about组件</h1>
    <h3>Store中的state的count的值：{{ count }}</h3>
    <h3>Store中的getter的doubleCount的值：{{ doubleCount }}</h3>
    <h3>Store中的getter的totalAge的值：{{ totalAge }}</h3>
    <h3>Store中的getter的totalAge放大10倍的值：{{ getDoubleTotalAge }}</h3>
    <h3>从Store中的查找id为1的对象：{{ getUserById(2) }}</h3>
    <h3>从Store中的查找id为1的对象的名字：{{ getUserById(2).name }}</h3>
    <button type="button" class="layui-btn" @click="add">从about组件中修改store中的count</button>
  </div>
</template>

<style scoped lang="less"></style>